@import "./../common/common";
main {
  >p.cart-title {
    span:nth-child(1) {
      padding-right: 1em;
      border-right: 1px solid fade(@themeR, 50);
    }
    span:nth-child(2) {
      padding-left: 1.5em;
    }
  }
  #cartItemsList {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    .card {
      width: 99%;
      margin: 1rem 0;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
      transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
      .cardShad;
      &:hover {
        width: 100%;
      }
      .card-body {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        >* {
          flex: 1
        }
        label {
          margin: 0 1rem 0 0;
          max-width: 1rem;
          >input {
            appearance: none;
            -webkit-appearance: none;
            outline: none;
            margin: 0;
            &:after {
              display: block;
              content: "";
              width: 1rem;
              height: 1rem;
              background: #fff;
              border: 1px solid black;
            }
            &:checked:after {
              background: @themeR;
              border: 1px solid @themeR;
              padding: 1px;
              background-clip: content-box;
            }
          }
        }
        .bookImg {
          height: 100%;
          max-width: 100px;
          >img {
            height: auto;
            width: 100%;
          }
        }
        .bookDescribe {
          margin: 0 1%;
          max-width: 40%;
          >p {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          >a {
            font-weight: bold;
            line-height: 1.5rem;
            font-size: 1.25rem;
            display: block;
          }
        }
        .countControl {
          max-width: 8rem;
          text-align: center;
          >* {
            padding: 0;
          }
        }
        .bookPrice {
          max-width: 10rem;
          text-align: center;
          color: @themeR;
          font-weight: bold;
        }
        .deleteBtn {
          max-width: 1rem;
          cursor: pointer;
        }
      }
    }
    .actionBottom {
      background-color: white;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
      padding-left: 1rem;
      width: 100%;
      margin: 1rem 0;
      &.fixing {
        position: fixed;
        bottom: 0;
        z-index: 999;
        width: 100vw;
        margin: 0;
      }
      .checkAllWrap {
        display: flex;
        align-items: flex-end;
        >span {
          margin-left: 4px;
          font-size: 1rem;
        }
        .checkAll {
          max-width: 1rem;
          line-height: 100%;
          margin-bottom: 0;
          >input {
            appearance: none;
            -webkit-appearance: none;
            outline: none;
            &:after {
              display: block;
              content: "";
              width: 1rem;
              height: 1rem;
              background: #fff;
              border: 1px solid black;
            }
            &:checked:after {
              background: @themeR;
              border: 1px solid @themeR;
              padding: 1px;
              background-clip: content-box;
            }
          }
        }
      }
      .sub {
        >span {
          padding: 0 0.5rem;
        }
      }
    }
  }
}

.inputStyle {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border-color: transparent;
  border-bottom-color: rgba(0, 0, 0, 0.15);
  transition: border 0.3s;
  &:focus {
    border-bottom-color: @themeR;
  }
}

#mask {
  position: absolute;
  top: 0px;
  filter: alpha(opacity=60);
  background-color: black;
  z-index: 1002;
  left: 0px;
  opacity: 0.5;
  -moz-opacity: 0.5;
  display: none;
}

#payWrap {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #34393c;
  min-height: 100%;
  max-height: 100%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 99999999999;
  >.shippingAddress {
    flex: 1;
    max-height: 100%;
    overflow-y: scroll;
    z-index: 9;
    >.closeBtn {
      width: 2rem;
      background-color: #34393c;
      position: absolute;
      left: -2rem;
      top: 10rem;
      padding: 0.75rem;
      border-radius: 0.5rem 0 0 0.5rem;
      color: white;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    }
    &::-webkit-scrollbar {
      display: none;
    }
    label {
      font-weight: bold;
      letter-spacing: 2px;
    }
    .shippingCard {
      box-shadow: 0 1px 3px rgba(224, 109, 16, 0.12), 0 1px 2px rgba(224, 109, 16, 0.24);
      border-radius: 0.5rem !important;
      transition: all 0.3s;
      margin-bottom: 1rem;
      .card-header {
        border-radius: 0.5rem 0.5rem 0 0;
        a {
          font-weight: bolder;
        }
        .form-inline-control {
          outline: none;
          border-width: 1px;
          .inputStyle() !important;
        }
      }
      .card-body {
        .form-control:focus {
          border-color: @themeR;
        }
        .citys {
          display: flex;
          flex-direction: column;
          .cityRow {
            display: flex;
            .custom-select {
              flex: 1 1 50%;
              font-size: 14px;
              margin: 4px;
              .inputStyle();
              &>option {
                &:active {
                  color: @themeR;
                }
              }
            }
          }
        }
        input {
          font-size: 14px;
          letter-spacing: 1px;
          margin: 4px;
          .inputStyle() !important;
        }
        .shippingInfo {
          >.form-group {
            margin: 0;
            &:nth-child(1) {
              padding-right: 0.5rem;
              flex: 1;
            }
            &:nth-child(2) {
              padding-left: 0.5rem;
              flex: 1;
            }
            p {
              margin: 0;
            }
            .shippingPhone,
            .shippingCode {
              .inputStyle();
            }
          }
        }
      }
      .card-footer {
        border-radius: 0 0 0.5rem 0.5rem;
        display: flex;
        justify-content: center;
        padding: 0 1.25rem 1.25rem 1.25rem;
        a {
          flex: 1;
        }
      }
      &:hover {
        box-shadow: 0 10px 20px rgba(224, 109, 16, 0.19), 0 6px 6px rgba(224, 109, 16, 0.23);
      }
      &.active {
        .card-header {
          transition: background 0.5s;
          background: linear-gradient(to right, fade(@themeR, 70), @themeR);
          p {
            color: white;
          }
          a {
            color: white !important;
          }
          .form-inline-control {
            color: white;
            border-bottom-color: white;
          }
        }
      }
    }
  }
  .bottom {
    width: 100%;
    position: relative;
    >.payQrcode {
      width: 100%;
      position: absolute;
      bottom: 3rem;
      background-color: white;
      z-index: -1;
      border-radius: 0.5rem;
      opacity: 0;
      bottom: -100%;
      box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
      >.card-header{
        border-radius: 0.5rem 0.5rem 0 0;

      }
    }
    >a {
      width: 100%;
      margin-top: 1rem;
    }
  }
  .checkedList {
    max-height: 40%;
    margin-top: 1rem;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
    .checkCard {
      border-radius: 0.5rem;
      .card-header {
        border-radius: 0.5rem 0.5rem 0 0;
      }
      ul {
        padding: 0;
        margin: 0;
        li {
          list-style: none;
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          height: 64px;
          margin-bottom: 1rem;
          &:last-child {
            margin-bottom: 0;
          }
          img {
            height: 100%;
            width: auto;
          }
        }
      }
    }
  }
}

.addCard {
  background-color: white;
  .card-body {
    background-color: rgba(0, 0, 0, 0.03);
    >.plus {
      margin: 1rem;
      padding: 1rem;
      border: 4px dashed rgb(85, 85, 85);
      border-radius: 0.5rem;
    }
  }
}

@media (min-width: 992px) {
  #payWrap {
    max-height: 100vh;
    min-height: 100vh;
    height: 100vh;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    .shippingCard {
      width: 500px;
    }
  }
}

@media (max-width: 992px) {
  #payWrap {
    bottom: 100%;
    left: 0;
    top: 100%;
    min-height: calc(~' 100vh - 10rem ');
    min-height: calc(~' 100vh - 10rem ');
    box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    border-radius: 1rem 1rem 0 0;
    >.shippingAddress>.closeBtn {
      top: -2.5rem;
      left: calc(~'50% - 2rem');
      width: fit-content;
      border-radius: 0.5rem 0.5rem 0 0;
      box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    }
  }
}